<template>
	<div class="container" v-if="isShow">
		<el-row class="header">
			<el-col :span="24">
				<div class="header_top">
					<h2>管理概览</h2>
					<el-select
						v-model="value"
						placeholder="楼栋"
						style="width: 240px; margin: 0px 30px"
						@change="changeValue"
						clearable
					>
					<el-option v-for="item in options" :key="item.buildId" :label="item.name" :value="item.name" />
					</el-select>
				</div>
			</el-col>
		</el-row>
		<div class="second">
			<div>
				<el-space wrap class="second_item">
					<el-card v-for="i in dataList" :key="i" class="box-card" style="width: 250px" @click="changeTo(i.text)">
						<div class="second_item_content">
							<div class="left">
								<img :src="i.img" />
							</div>
							<div class="right">
								<span>{{ i.text }}</span>
								<!-- <p>{{ i.text }}：{{ i.text }}</p> -->
								<p>{{i.name}}：{{i.sum}}</p>
							</div>
						</div>
					</el-card>
				</el-space>
			</div>
		</div>
		<!-- <div class="third">
			<h2>最新动态</h2>
			<el-table :data="dianList" v-loading="dataLoading"  style="width: 100%" height="250">
				<el-table-column fixed prop="date" label="日期" width="200" />
				<el-table-column prop="name" label="姓名" width="180" />
				<el-table-column prop="studentId" label="学号" width="180" />
				<el-table-column prop="su" label="宿舍楼" width="180" />
				<el-table-column prop="floor" label="楼层" width="180" />
				<el-table-column prop="room" label="宿舍号" width="160" />
				<el-table-column prop="Jl" label="充值记录" width="160" />
				<el-table-column fixed="right" label="操作" width="160">
					<template #default="scope">
						<el-button link type="primary" size="small" @click="handleClick(scope.row.key)">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div> -->
		<div style="width: 90%;">
            <h2>最新公告</h2>
            <div class="content">
                <el-card style="max-width: 50%" class="card_style" 
				v-for="it in titleList" 
				:kye="it.title_id" 
				@click="goTo(it.title_id)">
                    <div class="card_content">
                        <div class="card_img">
                            <el-image style="width: 100%; height: 100%;border-radius: 10px" :src="it.title_img"
                                fit="fit" />
                        </div>
                        <div class="card_tent">
                            <div style="margin-left: 30px;">
                                <h3>{{ it.title }}</h3>
                                <p>{{ it.title_content }}</p>
                                <span style="font-size: 12px;color: #eee">时间:{{(it.title_time)}}</span>
                            </div>
                           
                        </div>
                    </div>
                </el-card>
            </div>
        </div>
	</div>
	<div v-else>
        <TitleDateils :id="TtileId"></TitleDateils>
    </div>
</template>

<script setup name="home">
import { ref, onMounted ,watch} from "vue";
import { getBuild, getDianInfo,DelDianInfo,personNums ,
	getDelare,getTitle} from "@/api/admin/home";
import { getHomeInfo } from "@/api/student/home"
import TitleDateils from "@/views/directives/component/TitleDateils.vue";
import { useRouter } from "vue-router";
const router = useRouter()
const loading = ref(false);
const dataLoading = ref(false);
const value = ref("博贤楼");
const options = ref([]);
// const options = [
//   {
//     value: '龙门客栈',
//     label: '龙门客栈',
//   },
//   {
//     value: '博贤楼',
//     label: '博贤楼',
//   },
 
// ]
const dataList = ref([
	{
		img: "../../../../public/img/学生信息管理.png",
		text: "用户总数",
	},
	{
		img: "../../../../public/img/宿舍维修管理.png",
		text: "维修单总数",
	},
	{
		img: "../../../../public/img/公告1.png",
		text: "公告总数",
	},
	{
		img: "../../../../public/img/信息管理2.jpg",
		text: "消息",
	}
]);
const dianList = ref([]);

const titleList = ref([]);
const isShow = ref(true)
const TtileId = ref('');

// 获取电费充值记录
const dian = async () => {
	// dataLoading.value = true;
	try {
		const res = await getDianInfo();
		if (res.data.code === 200) {
            let arr = [];
            res.data.data.forEach(it=>{
                arr.push({
                    key:it.order_id,
                    date:it.order_time,
                    name:it.username,
                    studentId:it.studentcard,
                    su:it.build,
                    floor:it.dormitory,
                    room:it.bed,
                    Jl:it.order_pay
                })
            })
			dianList.value = [...arr];
			
		} else {
			ElNotification({
				message: "获取信息失败 ",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
watch(value,async ( count,old)=>{
	if(count === value.value){
	let value = options.value.filter(it=>it.name === count);
	const res = await personNums(value[0]?.buildId);
	let sum = 0;
	// 用户
	if(res.data.code === 200 && res.data.data.length >0){
		res.data.data.forEach(it=>{
			  sum +=Number(it.room_num)
		})
		dataList.value[0].name = count;
		dataList.value[0].sum = sum;
	}else{
		dataList.value[0].name = count;
		dataList.value[0].sum = 0;
	}
	// 公告	·
	}else{
		return;
	}
},{immediate:true});
// 报修
// watch(value,async ( count,old)=>{
// 	if(count === '博贤楼'){
	
// 	// console.log(dataList.value[1].sum)
// 	// 公告	·
// 	}else{
// 		let value = options.value.filter(it=>it.name === '龙门客栈');
// 		const getOrder = await getDelare(value[0]?.buildId);
		
// 	console.log(getOrder )
// 	if(getOrder.data.code === 200 && getOrder.data.data.length >0){
// 		dataList.value[1].name = count;
// 		dataList.value[1].sum =  getOrder.data.data.length;
// 	}else{
// 		dataList.value[1].name = count;
// 		dataList.value[1].sum =  0;
// 	}
// 	}
// },{immediate:true});
// 公告
const SumTitle =async ()=>{
	try {
		const res = await getTitle();
		if(res.data.code === 200){
			dataList.value[2].name = '校园公告';
			dataList.value[2].sum = res.data.data.length;
		}else{
			ElNotification({
                message: "获取信息失败 ",
                type: "error",
                duration: 3000
            });
		}
	} catch (error) {
		console.log(error)
	}
	
}

const changeVal = async () => {
	try {
		const res = await getBuild();
		if (res.data.code === 200) {
			let arr = [];
			res.data.data.forEach(it => {
				arr.push({ name: it.build_name, buildId: it.build_id, num: it.build_rom_num });
			});
			options.value = [...arr];
			
			// setTimeout(()=>{ getVal()},1500)
		} else {
			ElNotification({
				message: "获取数据失败 ",
				type: "error",
				duration: 3000
			});
		}
	} catch (error) {
		console.log(error);
	}
};
// 拿去
const getTitles = async () => {
    try {
        const res = await getHomeInfo();
        if (res.data.code === 200) {

            titleList.value = [...res.data.data].slice(0,2)
        } else {
            ElNotification({
                message: "获取信息失败 ",
                type: "error",
                duration: 3000
            });
        }
    } catch (error) {
        console.log(error)
    }
}
const goTo = (id)=>{
    TtileId.value = id;
	isShow.value = false;
}
const changeValue =async (value)=>{
	let name =  !value ? '博贤楼' : value
	let values = options.value.filter(it=>it.name === name);
	const getOrder = await getDelare(values[0]?.buildId);
	// console.log(g/etOrder )
	if(getOrder.data.code === 200 && getOrder.data.data.length >0){
		dataList.value[1].name = name;
		dataList.value[1].sum =  getOrder.data.data.length;
	}else{
		dataList.value[1].name = name 
		dataList.value[1].sum =  0;
	}
	// 获取待处理消息
	getWeiInfo(name)
}
// 获取数据
const getWeiInfo = async (name)=>{
	try {
		let values = options.value.filter(it=>it.name === name);
		const res = await getDelare(values[0]?.buildId);
		if(res.data.code === 200){
			let sum = res.data.data.filter(it=>it.declare_state === 1);
			dataList.value[3].name='待处理';
			dataList.value[3].sum=sum.length;
		}
	} catch (error) {
		console.log(error)
	}
}
// 页面跳转
const changeTo = (path)=>{
	if(path === '公告总数'){
		router.push({path:'/directives/copy'})
	}else if(path === '消息'){
		router.push({path:'/panel/index'})
	}
}
onMounted(() => {
	changeVal(); 
    dian()
	getTitles()
	DelDianInfo();
	SumTitle();
	changeValue()
})


</script>

<style scoped lang="scss">
.container {
	.header {
		width: 100%;
		height: 70px;
		background-color: white;
		.header_top {
			margin-left: 30px;
			align-items: center;
			justify-content: flex-start;
			display: flex;
		}
	}
	.second {
		width: 80%;
		margin-top: 10px;
		.second_item {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin: 0px 100px;
			.second_item_content {
				display: flex;
				justify-content: space-around;
				width: 100%;
				height: 120px;
				align-items: center;
				.left {
					width: 50%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					img {
						width: 100px;
						height: 100px;
					}
				}
				.right {
					margin-top: 20px;
					font-size: 19px;
					font-weight: 600;
					p {
						font-size: 16px;
						color:#909399;
					}
				}
			}
		}
	}
	.third {
		width: 99%;
		margin: 10px;
	}

	.el-carousel__item h3 {
        color: #475669;
        opacity: 0.75;
        line-height: 200px;
        margin: 0;
        text-align: center;
    }

    .el-carousel__item:nth-child(2n) {
        background-color: #99a9bf;
    }

    .el-carousel__item:nth-child(2n + 1) {
        background-color: #d3dce6;
    }

	.content {
        width: 100%;
        margin-left: 60px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .card_style {
            width: 49%;
            height: 200px;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .card_content {
                width: 90%;
                margin: 10px;
                display: flex;
                justify-content: space-between;
                align-items: center;

                .card_img {
                    border-radius: 5px;
                    width: 40%;
                    height: 100%;
                }
            }
        }
    }
}
</style>
